<template>
  <div>
    <h1>这些商品的总价是{{ allPrice }}</h1>
  </div>
</template>
<script>
import { computed, reactive, toRefs } from "vue";
export default {
  setup(props) {
    const data = reactive({
      list: [
        {
          title: "ysl",
          price: 200,
          num: 10,
        },
        {
          title: "阿玛尼口红",
          price: 300,
          num: 5,
        },
        {
          title: "后裔皮肤",
          price: 28,
          num: 4,
        },
        {
          title: "安其拉皮肤",
          price: 188,
          num: 3,
        },
      ],
    });

    const allPrice = computed(() => {
      let sum = 0;
      data.list.forEach((item) => {
        sum += item.num * item.price;
      });
      return sum;
    });
    //计算属性在这里是一个方法 接收一个回调函数作为参数
    // 作为参数传递的函数就是回调函数

    return { ...toRefs(data), allPrice };
  },
};
</script>
